<template>
  <div>
   <zl-panel>
     <div slot="zlLPanelBodyHeader">
       <el-button size="mini" v-waves icon="el-icon-plus" @click="addMenu('ruleFormMenus')">增加</el-button>
       <el-button size="mini" v-waves icon="el-icon-delete" @click="delMenu()">删除</el-button>
     </div>
     <el-tree slot="zlLPanelBody" v-if="menuTree"
              ref="menuTree"
              :data="menuTree"
              show-checkbox
              highlight-current
              :render-content="renderContent"
              @node-click="handleNodeClick"
              clearable
              node-key="id"
              :props="defaultProps">
     </el-tree>

     <el-form :model="ruleFormMenus" :rules="rulesMenus" ref="ruleFormMenus" label-width="80px"  slot="zlRPanelBody">
       <el-row>
         <el-col :span="12">
           <el-form-item label="上级菜单" prop="parentName">
             <elTreeselect v-model="parentName"
                           clickParent
                           placeholder="请输入搜索内容"
                           :data="menuTree"
                           :props="props"
                           :renderContent="renderContent"
                           @nodeClick="nodeClick"
                           @clearFun="clearFun">
             </elTreeselect>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="是否显示" prop="isShow">
             <el-switch
               v-model="ruleFormMenus.isShow">
             </el-switch>
           </el-form-item>
         </el-col>
       </el-row>

       <el-row>
         <el-col :span="12">
           <el-form-item label="菜单名称" prop="name">
             <el-input v-model="ruleFormMenus.name"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="是否清除" prop="isClear">
             <el-switch
               v-model="ruleFormMenus.isClear">
             </el-switch>
           </el-form-item>
         </el-col>
       </el-row>

       <el-row>
         <el-col :span="12">
           <el-form-item label="菜单图标" prop="icon">
             <i :class="ruleFormMenus.icon" v-model="ruleFormMenus.icon"></i>
             <el-button type="text" @click="selectIconDialogVisible=true">选择图标</el-button>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="菜单类型" prop="menuType">
             <el-radio-group v-model="ruleFormMenus.menuType">
               <el-radio :label="1">菜单</el-radio>
               <el-radio :label="2">按钮</el-radio>
               <el-radio :label="3">其他</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>
       </el-row>

       <el-row>
         <el-col :span="12">
           <el-form-item label="菜单路径" prop="filePath">
             <el-input v-model="ruleFormMenus.filePath"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="菜单排序" prop="sort">
             <el-input-number v-model="ruleFormMenus.sort" :precision="2" :step="0.01" :min="1" :max="666" label="描述文字"></el-input-number>
           </el-form-item>
         </el-col>
       </el-row>

       <el-row>
         <el-col :span="12">
           <el-form-item label="菜单路由" prop="href">
             <el-input v-model="ruleFormMenus.href"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="12">
           <el-form-item label="菜单备注" prop="comment">
             <el-input v-model="ruleFormMenus.comment"
                       type="textarea"
                       :rows="1"
                       :autosize="{ minRows: 1, maxRows: 1}"
                       placeholder="请输入内容">
             </el-input>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item>
             <el-button v-if="!isModifyMenu" v-waves size="mini" type="primary" icon="el-icon-plus">创建</el-button>
             <el-button v-if="isModifyMenu" v-waves size="mini" type="primary" icon="el-icon-edit-outline">修改</el-button>
             <el-button v-waves size="mini" class="iconfont icon-undo" @click="resetForm('ruleFormMenus')">重置</el-button>
           </el-form-item>
         </el-col>
       </el-row>

       <el-dialog title="选择图标"
                  :visible.sync="selectIconDialogVisible"
                  width="60%">
          <div class="select-icon">
           <el-scrollbar tag="div"
                         class='is-empty'
                         wrap-class="el-select-dropdown__wrap"
                         view-class="el-select-dropdown__list">
             <div class="icons-wrapper">
               <i class="fa fa-address-book" @click="selectIcon($event)"></i>
               <i class="fa fa-address-book-o" @click="selectIcon($event)"></i>
               <i class="fa fa-address-card" @click="selectIcon($event)"></i>
               <i class="fa fa-address-card-o" @click="selectIcon($event)"></i>
               <i class="fa fa-adjust" @click="selectIcon($event)"></i>
             </div>
           </el-scrollbar>
          </div>
         <span slot="footer" class="dialog-footer">
           <el-button @click="selectIconDialogVisible = false">取 消</el-button>
         </span>
       </el-dialog>

     </el-form>
   </zl-panel>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import elTreeselect from 'el-tree-select'
  import merge from 'element-ui/src/utils/merge'
  import {findFromTree} from '../../../utils/utils'

  export default {
    data () {
      return {
        menuTree: [],
        defaultProps: {
          children: 'children',
          label: 'name',
          id: 'id'
        },
        parentName: '',
        isModifyMenu: false,
        ruleFormMenus: {
          id: -1,
          parentId: 0,
          sort: 1,
          name: '',
          href: '',
          filePath: '',
          comment: '',
          icon: '',
          menuType: 1,
          isShow: true,
          isClear: true
        },
        props: {
          label: 'name',
          value: 'id'
        },
        selectIconDialogVisible: false,
        rulesMenus: {
          name: [
            { required: true, message: '请输入菜单名称', trigger: 'blur' }
          ]
        }
      }
    },
    created () {
      this.menuTree = this.menuList
    },
    methods: {
      selectIcon (event) {
        this.ruleFormMenus.icon = event.target.className
        this.selectIconDialogVisible = false
      },
      renderContent (h, { node, data, store }) {
        return (
          <span>
            <span>
              <span><i class={data.icon}></i>&nbsp;{node.label}</span>
            </span>
          </span>)
      },
      handleNodeClick (event) {
        this.$refs['ruleFormMenus'].resetFields()
        this.isModifyMenu = true
        this.ruleFormMenus = merge({}, event)
        let _menuList = findFromTree(this.menuList, this.ruleFormMenus.parentId)
        this.parentName = ''
        if (_menuList) {
          this.parentName = _menuList.name
        }
      },
      clearFun () {
        this.ruleFormMenus.parentId = 0
        this.ruleFormMenus.id = -1
        this.parentName = ''
      },
      nodeClick (event) {
        this.ruleFormMenus.parentId = event.id
      },
      addMenu (formName) {
        this.$message({
          showClose: true,
          message: '在右边输入菜单信息，点击创建！'
        })
        this.resetForm(formName)
        let _menuList = this.getCurrentNode()
        this.parentName = ''
        if (_menuList) {
          this.parentName = _menuList.name
          this.ruleFormMenus.parentId = _menuList.id
        }
      },
      delMenu () {
        let _menuList = this.getCheckedKeys()
        console.log('delMenu:', _menuList)
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
        this.isModifyMenu = false
        this.clearFun()
      },
      getCurrentNode () {
        return this.$refs.menuTree.getCurrentNode()
      },
      getCheckedKeys () {
        return this.$refs.menuTree.getCheckedKeys()
      }
    },
    computed: {
      ...mapGetters({
        menuList: 'permission/menuList'
      })
    },
    components: {
      elTreeselect
    }
  }
</script>
<style scoped>
  .select-icon .icons-wrapper {
    display: block;
  }

  .select-icon .is-empty i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
  }

  .select-icon .is-empty i:hover {
    background-color: #0d6aad;
    color: #ffffff;
  }
</style>
